<template>
	<div class="app">
		<div class="cartoon">
			<div class="cartoon_list">
				<div class="list_on">
					<router-link :to="{name:'channel',params:{tid:curTid}}" active-class="active">
						<p>推荐</p>
					</router-link>
					<router-link active-class="active" :to="{name:'channel',params:{tid:item.tid}}" v-for="(item,index) in NavList" :key="index">
						<p>{{item.typename}}</p>
					</router-link>
				</div>
			</div>
		</div>
		<!--<div>
			<router-link to="">
				<div v-for="(item,index) in NavList">
					<div class="remen mad" style="color: gray;">{{item.typename}}</div>
					<div class="neirong">
						<div class="tuijian" v-for="(ele,index) in tjj">
							<p><img :src="ele.pic"/></p>
							<p class="shuanghang">{{ele.title}}</p>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</router-link>
		</div>-->
		<div class="remen mad">
			<p v-for="(item,index) in tj" v-if="index<1">{{item.typename}}</p>
		</div>
		<div class="neirong">
			<router-link to="">
				<div v-for="(item,index) in tj" v-if="index<4" class="tuijian">
					<p><img :src="item.pic"/></p>
					<p class="shuanghang">{{item.title}}</p>
				</div>
				<div class="clear"></div>
			</router-link>
		</div>
		<!--{{tid}}-->
	</div>
</template>

<script>
	import CONFIG from "@/config";
	import axios from 'axios';
	let partionList = window.__INITIAL_STATE__.reduxAsyncConnect.partitionList;
	export default {
		props: {
			tid: {
				type: [String, Number],
				default: 1
			}
		},
		mounted(){
			this.tuijian();
			this._getTidList();
		},
		created() {
			this.$store.commit("setCurTid",{
	  				curTid:this.$route.params.tid
	  			})
			this.NavList=partionList[this.$store.getters.getCurTid]
			console.log(this.NavList)
//			this._SetSecondNavList(this.$route.params.tid)	
		},
		data() {
			return {
				NavList: [],
				curTid: "1",
				tj:[],
				tjj:[],
			}
		},
		watch: {
			$route(newValue) {
				this.$emit("PchangeTid", newValue.params.tid)
				this._SetSecondNavList(newValue.params.tid)
				if(this.$route.path.indexOf("channel")>0){
					this._getTidList()//获取tid同时获取data
				}
				//				console.log(newValue)
			},
			tid: function(newV) {
				//				实时更新NavList的内容
								this.navList =partionList[newV];
								
								this.tuijian();
//				this.secondNavList = partionList[newV]
			}
		},
		computed: {
//			secondNavList: {
//				get: function() {
//					return this.NavList
//				},
//				set: function(newValue) {
//					if(newValue) {
//						//						console.log(newValue);
//						//						console.log(this.curTid)
//						this.curTid = this.tid
//						if(newValue) {
//							this.curTid = this.tid
//						}
//						this.NavList = partionList[this.curTid]
//					}
//				}
//			}
		},
		methods: {
			_getTidList(){
				this.tjj=[]
				this.tidList=[]
				partionList[this.$route.params.tid].forEach((el,index)=>{
					this.tidList.push(el.tid)
//					console.log(this.tidList.push(el.tid))
				})
				console.log("Tid1盒子",this.tidList)//当前页面所需tid
				this.tidList.forEach((el)=>{
					this.tuituijian(el)
				})
//				console.log(this.tjj)
			},
			tuituijian(arr){
//				console.log(arr)
//				this.tjj=[];
				var url = CONFIG.domain+"/sao";				
//				console.log(axios);
				axios.get(url,{
					params:{
						rid:arr
					}
				}).then((res,index)=>{
					console.log(res);
					res.data.data.splice(0,4).forEach((el,index)=>{
//						console.log(el)
						this.tjj.push(el)
					});
				})				
			},
			tuijian(){
//				this.tj=[];
				var url = CONFIG.domain+"/sao";				
//				console.log(axios);
				axios.get(url,{
					params:{
						rid:this.tid
					}
				}).then((res)=>{
//					console.log(this.res);
					res.data.data.forEach((el)=>{
						this.tj.push(el)
					});
//					console.log(this.tj)
				})
			},
			_SetSecondNavList(tid) {
				const hasCon = partionList[tid]
//				console.log(hasCon);
				if(!hasCon) {
//					遍历大对象的属性名(键名)
					let handleNav = function() {
						const keyArr = Object.keys(partionList)
//						console.log(keyArr)
						//					核心代码:tid==obj.tid
						for(let i = 0, len = keyArr.length; i < len; i++) {
//						一定要清楚,你访问的元素是什么
//						partionList[keyArr[i]]
//						console.log(partionList[keyArr[i]])
							const tmpArr = partionList[keyArr[i]]
							for(let j = 0; j < tmpArr.length; j++) {
								//							内循环
//								console.log(tmpArr[j])
								//							核心代码
								if(tmpArr[j].tid == tid) {
									return keyArr[i]
								}
//								console.log(111)
							}
						}
					}
					this.curTid = handleNav()
				} else {
					this.curTid = tid
				}
//				this.$store.commit("setCurTid",this.curtid)
				this.NavList = partionList[this.curTid]
			}
		}
	}
</script>

<style lang="scss">
	$maincolor:#fb7299;
	.app{
		padding-top:50px;
	}
	.cartoon_list {
		width: 100%;
		overflow: hidden;
		height: 37.6px;
		border-bottom: 1px solid #ccc;
		.list_on {
			overflow-x: scroll;
			overflow-y: hidden;
			white-space: nowrap;
			padding-left: 18px;
			padding-bottom: 4.2px;
			background-color: #f9f9f9;
			height: 37.6px;
			line-height: 37.6px;
			z-index: 1;
			p {
				display: inline-block;
				font-size: 12px;
				color: #757575;
				margin-right: 18px;
			}
			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
	.cartoon_list .list_on .active {
		p{
			color: $maincolor;
		}
	}
	.remen{
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		height: 40px;
		line-height: 40px;
	}
	.remen p{
		color: gray;
		font-size: 15px;
	}
	.remen p a{
		color: #ffa726;
	}
	.remen p span{
		color: gray;
		margin-left: 10px;
	}
	.remen p svg{
		fill: #ffa726;
		height: 18px;
		vertical-align: middle;
		margin-top: -3px;
	}
	.tuijian{
		width: 47%;
		display: inline-block;
		margin-bottom: 20px;
		float: left;
		margin-right: 16px;
	}
	.tuijian img{
		width: 100%;
		border-radius: 8px;
	}
	.tuijian:nth-child(2n){
		margin-right: auto;
	}
	.tuijian p:nth-child(2){
		font-size: 13px;
		color: gray;
	}
	.mad p:nth-child(2) a{
		color: gray;
	}
	.neirong{
		width:90%;
		margin: 0 auto;
	}
</style>